@function pxTorem($px){
  @return $px /75px * 1rem
}
@function px($px){
  @return $px
}
#getcar{
  width:100%;
  height:pxTorem(540px);
  //height:pxTorem(1046px);
  position: fixed;
  left:0;
  bottom:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  .getcar{
    width:100%;
    height:pxTorem(1046px);
    background: #FFFFFF;
    box-shadow: 0 pxTorem(-10px) pxTorem(20px) 0 rgba(0,0,0,0.05);
    .parkTop{
      width:100%;
      height:pxTorem(96px);
      border-bottom:pxTorem(2px) solid #f5f5f5;
      display: flex;
      .parkGet{
        width:pxTorem(164px);
        height:100%;
        line-height:pxTorem(96px);
        font-size: pxTorem(24px);
        color: #AAAAAA;
        letter-spacing: 0;
        .parkCircle{
          width:pxTorem(14px);
          height:pxTorem(14px);
          -webkit-border-radius: 100%;
          -moz-border-radius: 100%;
          border-radius: 100%;
          background: #09C16A;
          margin:pxTorem(14px) pxTorem(10px) 0 pxTorem(30px);
          display: inline-block;
        }
      }
      .parkName{
        width:pxTorem(470px);
        height:100%;
        line-height:pxTorem(96px);
        font-size: pxTorem(26px);
        color: #333333;
        letter-spacing: 0;
        .park_name{
          max-width:5rem;
          display: inline-block;
          float: left;
        }
        .park_y{
          width:pxTorem(28px);
          height:pxTorem(28px);
          display: inline-block;
          margin-left:pxTorem(18px);
          float: left;
          margin-top:34px;
          position: relative;
        }
      }
      .parkChange{
        width:pxTorem(116px);
        height:pxTorem(96px);
        font-size: pxTorem(26px);
        color: #AAAAAA;
        letter-spacing: 0;
        line-height:pxTorem(96px);
        span{
          color: #e6e6e6;
        }
      }
    }
    .carlist{
      width:100%;
      height:pxTorem(1046px);
      overflow-y: hidden;
      margin-top:pxTorem(30px);
      ul{
        width:100%;
        padding-bottom:pxTorem(200px);
      }
      li{
        width:pxTorem(690px);
        height:pxTorem(188px);
        margin:0 auto pxTorem(10px);
        background: #fcfcfc;
        -webkit-border-radius: pxTorem(10px);
        -moz-border-radius: pxTorem(10px);
        border-radius: pxTorem(10px);
        position: relative;
        .carpic{
          width:pxTorem(200px);
          height:100%;
          .pic{
            width:pxTorem(200px);
            height:pxTorem(100px);
            margin-top:pxTorem(18px);
            display: inline-block;
            object-fit:contain;
          }
          .plate{
            width:100%;
            text-align: center;
            font-size: pxTorem(24px);
            color: #AAAAAA;
            letter-spacing: 0;
            margin-top:pxTorem(3px);
          }
        }
        .cardetail{
          width:pxTorem(290px);
          height:100%;
          margin-left:pxTorem(38px);
          p{
            width:100%;
            font-size: pxTorem(22px);
            color: #AAAAAA;
            letter-spacing: 0;
          }
          p:first-child{
            margin-top:pxTorem(38px);
          }
          p:nth-child(2){
            margin-top:pxTorem(12px);
          }
          p:last-child{
            margin-top:pxTorem(12px);
            word-break: break-all;
            img:first-child{
              display: inline-block;
              width:pxTorem(76px);
              height:pxTorem(16px);
              margin-right:pxTorem(13px);
            }
          }
        }
        .chose{
          width:pxTorem(40px);
          height:pxTorem(40px);
          -webkit-border-radius: 100%;
          -moz-border-radius: 100%;
          border-radius: 100%;
          margin-top:pxTorem(74px);
          margin-right:pxTorem(50px);
        }
        .redbag{
          width:pxTorem(136px);
          position: absolute;
          right:pxTorem(18px);
          top:0.1rem;
          font-size: pxTorem(20px);
          color: #AAAAAA;
          letter-spacing: 0;
          span:first-child{
            display: inline-block;
            width:pxTorem(22px);
            height:pxTorem(22px);

          }
        }
      }
      .nocar{
        width:100%;
        text-align: center;
        font-size:30px;
      }
    }
  }

  .rebackbg{
    width:pxTorem(750px);
    height:pxTorem(200px);
    position: fixed;
    bottom: 0;
    left:0;
    background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 0%, #FFFFFF 41%);
    .reback{
      background: #DCDCDC;
      border-radius: pxTorem(50px);
      width:pxTorem(690px);
      height:pxTorem(100px);
      font-size: pxTorem(32px);
      color: #FFFFFF;
      line-height:pxTorem(100px);
      text-align: center;
      margin:pxTorem(70px) auto 0;
      span:first-child{
        height:100px;
        line-height:100px;
        display: inline-block;
      }
    }
    .reback.active{
      background: #0DB95F;
    }
  }
}
.guidebg{
  position: fixed;
  left: 0;
  top:0;
  right:0;
  bottom:0;
  background: rgba(0,0,0,0.1);
  z-index:30;
}
#map{
  width:100%;
  height:666px;
  .mappoint{
    position: absolute;
    z-index: 24;
    text-align: center;
    background: url("../../static/image/img_dot_bg.png");
    -webkit-background-size: cover;
    background-size: cover;
    color: #fff;
    font-weight:bold;
  }
  .mappoint[data-parkingid='userlocation']{
    background: #3EB2F9;
    border: 5px solid #FFFFFF ;/*no*/
    box-shadow: 0 4px 10px 0 rgba(36,112,156,0.20);/*no*/
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    width:30px !important;/*no*/
    height:30px !important;/*no*/
    -webkit-animation: change 1s infinite;
    -o-animation: change 1s infinite;
    animation: change 1s infinite;
  }
  .mapspan{
    background: #000;
    position: absolute;
    left:-50%;
    top:-80%;
    color: #fff;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: none !important;
    z-index:9999;
  }
  .mappoint.active{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    .mapspan{
      /*display: block;*/
    }
  }
}
.BMap_Marker{
  background: transparent !important;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  width:30px /*no*/ ;
  height:30px /*no*/;
  left:-17px /*no*/;
  top:64px /*no*/;
  display: none;

}
@keyframes change {
  0%,100%{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  50%{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
